<template>
  <div class="studentList">
    <el-table
      :data="pageData"
      style="width: 100%"
      header-cell-class-name="header"
    >
      <!-- pageData.filter(
      (data) =>
        !search || data.name.toLowerCase().includes(search.toLowerCase())
    ) -->
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="专业" prop="major" align="center">
      </el-table-column>
      <el-table-column label="班級" prop="class" align="center">
      </el-table-column>
      <el-table-column label="身高" prop="height" align="center">
      </el-table-column>
      <el-table-column label="体重" prop="weight" align="center">
      </el-table-column>
      <el-table-column label="日期" prop="date" align="center">
      </el-table-column>
      <el-table-column label="学校" prop="school" align="center">
      </el-table-column>
      <el-table-column label="地址" prop="address" align="center">
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入姓名搜索"
            @click="click(scope)"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            style=""
            @click="(dialogFormVisible = true), copy(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="500px"
      custom-class="wh"
      title="学生信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major" :label-width="formLabelWidth">
          <el-input v-model="form.major" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高" prop="height" :label-width="formLabelWidth">
          <el-input v-model="form.height" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="体重" prop="weight" :label-width="formLabelWidth">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school" :label-width="formLabelWidth">
          <el-input v-model="form.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
    <el-card style="height: 53px">
      <page
        @sendPageData="updatePageData"
        @sendCurrentPage="updateCurrentPage"
        :sendTableData="tableData"
        :sendTotal="pageAllData.total"
      ></page>
    </el-card>
    <router-link to="StudentAdd">
      <el-button type="success" class="addBtn">添加学生</el-button>
    </router-link>
  </div>
</template>
<script>
import page from "../widgets/Page.vue";
export default {
  components: {
    page,
  },
  data() {
    return {
      dialogFormVisible: false,
      name: "",
      major: "",
      class: "",
      height: "",
      weight: "",
      date: "",
      school: "",
      address: "",
      pageAllData: {
        total: 5,
        pageSize: 5,
        currentpage: 1,
      },
      pageData: [],
      tableData: [],
      search: "",
      arr: [
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          hidden: true,
          index: 0,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 1,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 2,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 3,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 4,
        },        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          hidden: true,
          index: 5,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 6,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 7,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 8,
        },
        {
          school: "嘉兴职业技术学院",
          major: "软件技术",
          class: "軟件181",
          height: "175cm",
          weight: "60kg",
          date: "2016-05-02",
          name: "杨文义",
          address: "嘉兴南湖区",
          index: 9,
        },
      ],
      form: {
        name: "",
        major: "",
        class: "",
        height: "",
        weight: "",
        date: "",
        school: "",
        address: "",
      },
      formLabelWidth: "40px",
    };
  },
  created() {
    this.getlist();
    // let abc = JSON.parse(localStorage.getItem("Data")) || [];
    // this.tableData = abc;
    // console.log(this.tableData);
    // localStorage.setItem("Data",JSON.stringify(this.tableData))
    // console.log(abc);
    if (JSON.parse(window.localStorage.getItem("Data"))) {
      this.tableData = JSON.parse(localStorage.getItem("Data"));
    } else {
      window.localStorage.setItem("Data", JSON.stringify(this.tableData));
    }
  },
  methods: {
    //重新负值
    getlist() {
      this.tableData = this.arr;
    },
    handleDelete(index, row) {
      this.pageData.splice(index, 1);
      // this.getlist();
      this.tableData.splice(index, 1);
      window.localStorage.setItem("Data", JSON.stringify(this.tableData));
      // localStorage.data = this.tableData
      // let abc = this.tableData.slice(index,index+1)
      // this.tableData.splice(index+1,1)
      // console.log(this.tableData.slice(index,index+1));
      // console.log(this.pageData);
      this.pageData = this.tableData.slice(
        this.pageAllData.pageSize * (this.pageAllData.currentpage - 1),
        this.pageAllData.pageSize * this.pageAllData.currentpage
      );
      console.log(this.pageData);
      this.pageAllData.total = this.tableData.length
      console.log(this.pageAllData.total);
    },
    copy(row) {
      this.form = row;
      console.log([...row]);
    },
    sure() {
      this.dialogFormVisible = false;
      //拿到缓存来进行操作后再负值给缓存
      let abc = JSON.parse(localStorage.getItem("Data"));
      console.log(abc);
      if (abc) {
        abc[this.form.index] = this.form;
      } else {
        abc = this.tableData;
        abc[this.form.index] = this.form;
        console.log(abc);
      }
      window.localStorage.setItem("Data", JSON.stringify(abc));
    },
    updatePageData(data) {
      this.pageData = data;
      console.log(data);
    },
    updateCurrentPage(data) {
      this.currentpage = data
      console.log(this.currentpage);
    },
  },
};
</script>
<style lang="scss">
.studentList {
  .el-dialog__header,
  .el-dialog__footer {
    height: 70px;
  }
  .el-dialog__footer {
    button {
      position: relative;
      bottom: 80px;
    }
  }
  .changebtn {
    float: left;
  }
  position: relative;
  width: 100%;
  height: 90%;
  .header {
    line-height: 20px;
  }
  .search {
    margin-bottom: 10px;
    .el-input {
      width: 20%;
      input {
        height: 40px;
      }
    }
    .el-card__body {
      text-align: left;
      height: 40px;
      line-height: 15px;
    }
  }
}
</style>
